/* eslint-disable react/jsx-pascal-case */
import React from "react"
import { HomeO, StarO, Star } from '@react-vant/icons'

const Proinfo = () => {
    let navigate = React.$router.useNavigate();
    const [info, setInfo] = React.useState({})
    // 获取路由传参的方法
    let [searchParams] =React.$router.useSearchParams();
    // 获取路由传参的ID值
    const [id, setId] = React.useState(searchParams.get('pid'))
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    const [collection, setCollection] = React.useState()

    React.useEffect(() => {
        getInfoData()
    },[id])

    const getInfoData = async() => {
        let data = {
            id: id,
            busid: LoginUser.id
        }
        let result = await React.$api.productinfo(data)
        if(result && result.code == 1){
            setInfo(result.data.info)
            setCollection(result.data.collection)
        }
    }

     // 收藏
     const toCollection = async() => {
        let data = {
            id: id,
            busid: LoginUser.id
        }
        if(JSON.stringify(LoginUser) === "{}"){
            React.$Vant.Notify.show({ type: 'warning', message: '未登陆，请先去登陆！',onClose: () =>{
                navigate('/business/base/login') 
            } })
            return false;
        }
        let result = await React.$api.productcollect(data)
        if(result && result.code == 1){
           React.$Vant.Toast.success({
                message: result.msg,
                onClose: () => {
                    getInfoData()
                }
            })
        } else {
            React.$Vant.Toast.fail({
                message: result.msg
            })
        }
    }

    const Collection = () =>{
        if(collection){
            return(
                <>
                  <React.$Vant.ActionBar.Icon
                    icon={<Star  color='red'/>}
                    text='已收藏'
                    onClick={toCollection}
                />
                </>
            )
        } else {
            return(
                <>
                  <React.$Vant.ActionBar.Icon
                    icon={<StarO  color='red'/>}
                    text='收藏'
                    onClick={toCollection}
                />
                </>
            )
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="产品详情"
                onClickLeft={() => navigate(-1)}
            />
            <div className="banner_shouy">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        <React.$Vant.Image fit="cover" width='100%' height='100%' src={info.thumbs_text} />{' '}
                    </div>
                </div>
            </div>
            <div className="top_title">
                <h2>{info.name}</h2>
                <div className="money">
                    <h3>￥{info.rent_price}</h3>
                    <p>押金:￥{info.rent}</p>
                </div>
                <div className="youhuiq common">
                    <div className="text">
                        <h2>保障</h2>
                        <div className="tb">
                            <div className="tis_fuwu">
                                <ul>
                                    <li className="no">保障</li>
                                    <li>保障</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="youhuiq common common_no">
                    <div className="text">
                        <h2>配送</h2>
                        <div className="tb">
                            送货上门
                        </div>
                    </div>
                </div>
            </div>
            <div className="rem2">  </div>
            <div className="xiang_qing_xp" >
                <div className="img_t" dangerouslySetInnerHTML={{__html: info.content}}>
                </div>
            </div>
            <React.$Vant.ActionBar>
                <React.$Vant.ActionBar.Icon
                    icon={<HomeO  color='red'/>}
                    text='首页'
                    onClick={() => navigate('/')}
                />
                <Collection/>
                <React.$Vant.ActionBar.Button
                    type='danger'
                    text='立即租赁'
                    onClick={() => navigate('/business/lease/add')}
                />
            </React.$Vant.ActionBar>
        </>
    )
}

export default Proinfo